<template>
  <div class="kanban-container">
    <h1 class="title">软件开发任务看板</h1>

    <div class="kanban-columns">
      <!-- 横向列容器（可选：如果不需要拖动列可把 onColumnDrop 移除） -->
      <Container group-name="kanban" orientation="horizontal" @drop="onColumnDrop" drag-class="column-dragging"
        :drop-placeholder="{
          animationDuration: 150,
          showOnTop: true,
          className: 'drop-preview-column'
        }">
        <Draggable v-for="(column, colIndex) in board" :key="column.id">
          <div class="kanban-column">
            <h2 class="column-title">{{ column.name }}</h2>

            <!-- 每列内部的任务容器：group-name 相同，允许跨列拖动 -->
            <Container group-name="kanban-column" orientation="vertical" :getChildPayload="index => column.tasks[index]"
              @drop="e => onCardDrop(colIndex, e)" drag-handle-selector=".drag-handle" :drop-placeholder="{
                animationDuration: 150,
                showOnTop: true,
                className: 'drop-preview'
              }" drag-class="dragging">
              <Draggable v-for="(item, idx) in column.tasks" :key="item.id">
                <div class="kanban-card" :data-id="item.id">
                  <span class="drag-handle">☰</span>
                  <div class="task-title">{{ item.data }}</div>
                </div>
              </Draggable>
            </Container>
          </div>
        </Draggable>
      </Container>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Container, Draggable } from "vue3-smooth-dnd";

/*
  示例数据
*/
const board = ref([
  {
    id: "col-1",
    name: "待办",
    tasks: [
      { id: "t1", data: "设计数据库结构" },
      { id: "t2", data: "开发用户登录功能" }
    ]
  },
  {
    id: "col-2",
    name: "进行中",
    tasks: [
      { id: "t3", data: "实现任务管理模块" },
      { id: "t4", data: "编写单元测试" }
    ]
  },
  {
    id: "col-3",
    name: "已完成",
    tasks: [
      { id: "t5", data: "优化接口性能" },
      { id: "t6", data: "部署到测试环境" }
    ]
  }
]);

// 列内（或跨列目标列）拖放的处理函数
function onCardDrop(colIndex, dropResult) {
  if (!dropResult) return;
  const { removedIndex, addedIndex, payload } = dropResult;

  // 没有变化
  if (removedIndex === null && addedIndex === null) return;

  // 1) 同列内移动（既有 removedIndex 又有 addedIndex）
  if (removedIndex !== null && addedIndex !== null) {
    board.value[colIndex].tasks = applyDrag(board.value[colIndex].tasks, dropResult);
    return;
  }

  // 2) 从当前列移出（source 列触发的事件：removedIndex 有值，addedIndex 为 null）
  if (removedIndex !== null && addedIndex === null) {
    board.value[colIndex].tasks.splice(removedIndex, 1);
    return;
  }

  // 3) 移入当前列（target 列触发的事件：removedIndex 为 null，addedIndex 有值）
  if (removedIndex === null && addedIndex !== null) {
    // payload 就是被拖动的任务对象（由 getChildPayload 提供）
    board.value[colIndex].tasks.splice(addedIndex, 0, payload);
    return;
  }
}

// 如果你也想允许拖动、重新排序列（可选）
function onColumnDrop(dropResult) {
  if (!dropResult) return;
  board.value = applyDrag(board.value, dropResult);
}

// 通用 applyDrag：处理同一数组内的移动（removedIndex & addedIndex 都存在）
function applyDrag(arr, dragResult) {
  const { removedIndex, addedIndex } = dragResult;
  if (removedIndex === null && addedIndex === null) return arr;
  const result = [...arr];
  const [removed] = result.splice(removedIndex, 1);
  result.splice(addedIndex, 0, removed);
  return result;
}
</script>

<style>
.kanban-container {
  margin: 40px;
  padding: 20px;
  background: #fafafa;
  border-radius: 16px;
  border: 1px solid #e3e5e7;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-x: auto;
}

.kanban-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* 标题 */
.title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  color: #18191c;
}

/* 列布局：让外层 Container 的列水平展示并可横向滚动 */
.kanban-column {
  width: 300px;
  min-height: 320px;
  padding: 10px;
  margin: 10px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e3e5e7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

/* 列内任务容器：即使为空也撑满，方便观察 */
.kanban-column>.smooth-dnd-container {
  flex: 1;
  /* 占满剩余空间 */
  min-height: 100%;
  /* 确保高度至少为父容器高度 */
  display: flex;
  flex-direction: column;
  background: #f9fafb;
  /* 浅灰背景 */
  border-radius: 6px;
  /* 保持圆角 */
  padding: 6px;
  /* 让卡片和边界留点空隙 */
  transition: background 0.2s ease;
}

/* 当没有任务卡片时，显示提示文字（可选） */
.kanban-column>.smooth-dnd-container:empty::after {
  content: "暂无任务，拖拽到此处";
  color: #999;
  font-size: 13px;
  text-align: center;
  margin-top: 20px;
}

/* 列标题 */
.column-title {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #18191c;
}

/* 卡片 */
.kanban-card {
  display: flex;
  justify-content: start;
  align-items: flex-end;
  background: #f5f7fa;
  border-radius: 6px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #e3e5e7;
}

/* 拖拽手柄 */
.drag-handle {
  cursor: move;
  margin-right: 6px;
}

.task-title {
  font-size: 14px;
  color: #18191c;
}

/* drop placeholder（投影）—— 保留并美化，不会被移除 */
.drop-preview {
  background-color: rgba(52, 152, 219, 0.06);
  border: 2px dashed rgba(100, 149, 237, 0.5);
  border-radius: 8px;
  padding: 10px;
  margin: 10px;
}

/* 列拖拽占位（可选样式）*/
.drop-preview-column {
  background-color: rgba(52, 152, 219, 0.06);
  border: 2px dashed rgba(100, 149, 237, 0.5);
  border-radius: 8px;
  padding: 10px;
  margin: 10px;
}

/* 被拖拽的实际元素样式（轻微效果，未隐藏占位） */
.dragging {
  transform: rotate(1.5deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
</style>